﻿@page "/docs/components/date"

<Seo Canonical="/docs/components/date" Title="Blazorise DateEdit component" Description="Learn to use and work with the Blazorise DateEdit component, which is a native date selection component that lets users select a date." />

<DocsPageTitle Path="Components/Date Edit">
    Blazorise DateEdit component
</DocsPageTitle>

<DocsPageLead>
    DateEdit is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay.
</DocsPageLead>

<DocsPageParagraph>
    A native date <Code Tag>input</Code> component built around the <Code Tag>input type="date"</Code>.
</DocsPageParagraph>

<DocsPageParagraph>
    Being built around native <Code Tag>input type="date"</Code> input element, the <Code>DateEdit</Code> component
    comes with a few limitations that you must be aware of. First and foremost, the input display format is fully
    controlled by the browser and the system locale. This means that for you to change the input format you would
    need to change the browser settings.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicDateEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicDateEditExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Binding
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding">
        By using <Code>bind-*</Code> attribute the selected date will be automatically assigned to the member variable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual event binding">
        When using the event <Code>DateChanged</Code>, you also must define the <Code>Date</Code> value attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditWithEventExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="DateTime">
        DateEdit component also support entering a time part. To enable it just set <Code>InputMode</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditDateTimeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditDateTimeExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Show Picker">
        <Paragraph>
            If you want to show the <Anchor To="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker">default picker</Anchor> that comes with the date input element you can make it by using the <Code>ShowPicker()</Code> function.
        </Paragraph>
        <Paragraph>
            <Strong TextColor="TextColor.Info">Note:</Strong> Keep in mind that not all browser will support the <Code>ShowPicker()</Code> function.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditShowPickerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditShowPickerExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Functions
</DocsPageSubtitle>

<Table>
    <TableHeader ThemeContrast="ThemeContrast.Light">
        <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Description</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowCell><Code>ShowPicker()</Code></TableRowCell>
            <TableRowCell>Show a browser picker for the date input.</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="Date" Type="TValue" Default="default">
        Gets or sets the input date value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DateChanged" Type="@("EventCallback<TValue>")">
        Occurs when the date has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="InputMode" Type="DateInputMode" Default="Date">
        Hints at the type of data that might be entered by the user while editing the element or its contents.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Min" Type="DateTimeOffset?" Default="null">
        The earliest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="DateTimeOffset?" Default="null">
        The latest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Step" Type="int" Default="1">
        The step attribute specifies the legal day intervals to choose from when the user opens the calendar in a date field.
    </DocsAttributesItem>
</DocsAttributes>